<template>
  <el-card class="sync-container">
    <el-skeleton :rows="13" animated :loading="loading">
      <div class="first-line-cloud">
        <svg-icon icon="mysql" class="icon-style1"></svg-icon>
        <el-tooltip
          class="box-item"
          :effect="$store.getters.themeStatus ? 'light' : 'customized'"
          content="开始同步"
          placement="top"
        >
          <el-icon class="icon-style2 icon-rotate" @click="handleSync"
            ><Refresh
          /></el-icon>
        </el-tooltip>

        <el-tooltip
          class="box-item"
          :effect="$store.getters.themeStatus ? 'light' : 'customized'"
          content="平台管理"
          placement="top"
        >
          <el-icon class="icon-style2" @click="show = !show"
            ><MostlyCloudy
          /></el-icon>
        </el-tooltip>
      </div>

      <transition name="appear">
        <div class="link-style" v-if="show">
          <el-button type="primary" size="default" @click="handleHdfs"
            >HDFS</el-button
          >
          <el-button type="primary" size="default" @click="handleJob"
            >Job History</el-button
          >
          <el-button type="primary" size="default" @click="handleApplication"
            >All Application</el-button
          >
        </div>
      </transition>

      <div class="sync-info-container">
        <div class="block">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
              <el-input
                placeholder="用户名"
                v-model="form.userName"
                size="default"
                resize="none"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.type" placeholder="请选择状态值">
                <el-option label="手动" :value="0" />
                <el-option label="自动" :value="1" />
              </el-select>
            </el-form-item>
            <el-form-item label="日期范围查询">
              <el-date-picker
                v-model="dates"
                type="daterange"
                range-separator="To"
                start-placeholder="Start
              date"
                end-placeholder="End date"
                value-format="YYYY-MM-DD"
                format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery">Query</el-button>
              <el-button @click="handleReset">Reset</el-button>
              <el-button type="danger" size="default">批量删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <el-table
        border
        ref="multipleTableRef"
        :data="tableData"
        class="tb-style"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" />
        <el-table-column
          v-for="item in options"
          :key="item.id"
          :property="item.property"
          :label="item.label"
          align="center"
        >
          <template #default="{ row }">
            <el-tag
              disable-transitions
              :type="row.type === 0 ? 'success' : ''"
              effect="dark"
              v-if="item.label === 'dataSyncWays'"
              >{{ row.type === 0 ? '手动上传' : '自动上传' }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="bottom-page">
        <el-pagination
          v-model:currentPage="dataSync.pageNo"
          v-model:page-size="dataSync.pageSize"
          :page-sizes="[2, 6, 16]"
          layout=" prev, pager, next, jumper,sizes,total"
          :total="total"
          @size-change="handleSizeChange"
          @update:current-page="handleCurrentChange"
          style="justify-content: flex-end"
        />
      </div>
    </el-skeleton>
  </el-card>
</template>
<script setup>
import { getDataSyncInfo } from '@/api/dataSync.js'
import { MostlyCloudy, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElLoading } from 'element-plus'
import { onMounted, ref } from 'vue'
import { options } from './options.js'

const show = ref(false)

const loading = ref(true)

const sync = () => {
  return {
    pageNo: 1,
    pageSize: 6
  }
}

const dataForm = () => {
  return {
    type: '',
    userName: '',
    startDate: '',
    endDate: ''
  }
}
const dataSync = ref(sync())

const total = ref(0)

const form = ref(dataForm())

const dates = ref([])

const tableData = ref([])

const resetInfo = () => {
  Object.assign(dataSync.value, sync())
  Object.assign(form.value, dataForm())
}

const initTableList = async (dataSync, form) => {
  try {
    const res = await getDataSyncInfo(dataSync, form)
    if (res.code === 200) {
      loading.value = false
      tableData.value = res.data.records
      total.value = res.data.total
    }
    // console.log(res)
  } catch (error) {
    ElMessage.error(error)
  }
}

onMounted(() => {
  initTableList(dataSync.value, form.value)
})

const handleSelectionChange = () => {}

const handleSizeChange = (val) => {
  // console.log(val)
  dataSync.value.pageSize = val
  dataSync.value.pageNo = 1
  initTableList(dataSync.value, form.value)
}
const handleCurrentChange = (val) => {
  dataSync.value.pageNo = val
  initTableList(dataSync.value, form.value)
}

const handleQuery = () => {
  form.value.startDate = dates.value[0] || ''
  form.value.endDate = dates.value[1] || ''
  initTableList(dataSync.value, form.value)
}

const handleReset = () => {
  resetInfo()
  initTableList(dataSync.value, form.value)
}

const handleHdfs = () => {
  window.open(
    'http://hadoop102:9870',
    'hdfs',
    'width=' +
      window.screen.availWidth +
      ',height=' +
      window.screen.availHeight +
      ', top = 0, left = 0, status=no'
  )
}
const handleJob = () => {
  window.open(
    'http://hadoop102:19888',
    'Job History',
    'width=' +
      window.screen.availWidth +
      ',height=' +
      window.screen.availHeight +
      ', top = 0, left = 0, status=no'
  )
}
const handleApplication = () => {
  window.open(
    'http://hadoop103:8088',
    'All Application',
    'width=' +
      window.screen.availWidth +
      ',height=' +
      window.screen.availHeight +
      ', top = 0, left = 0, status=no'
  )
}

// 处理同步
const handleSync = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'synchronizing...',
    background: 'rgba(0, 0, 0, 0.7)'
  })
  setTimeout(() => {
    loading.close()
    ElMessage({
      type: 'success',
      duration: 1500,
      message: '同步成功'
    })
  }, 2000)
}
</script>

<style lang="scss" scoped>
.sync-container {
  // text-overflow: ellipsis;
  // position: relative;
  .appear-enter-active {
    animation: bounce 0.5s;
  }
  .appear-leave-active {
    animation: bounce 0.5s reverse;
  }
  @keyframes bounce {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1);
    }
  }
  .link-style {
    text-align: center;
    box-sizing: border-box;
    display: block;
    // position: absolute;
    right: 0;
    top: 28px;
    overflow: hidden;
  }
  .first-line-cloud {
    display: flex;
    justify-content: center;
    align-items: center;
    .icon-style1 {
      font-size: 60px;
    }
    .icon-style2:nth-child(2) {
      margin: 0px 40px;
    }
    .icon-style2 {
      font-size: 40px;
    }
    .icon-style2:hover {
      cursor: pointer;
      color: #409eff;
    }
    .icon-rotate:hover {
      animation: iconrotate 5s infinite;
    }
    @keyframes iconrotate {
      100% {
        transform: rotate(-360deg);
      }
    }
  }

  .sync-info-container {
    margin-top: 20px;
  }
  .tb-style {
    margin-top: 15px;
  }
  /*   :deep(.el-input__inner) {
    // width: 120px;
  } */
  :global(.el-popper.is-customized) {
    padding: 5px 11px;
  }
  .bottom-page {
    margin-top: 15px;
  }
}
</style>
